<template>
    <div class="score-detail">
      <h1>成绩详情</h1>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>{{ score.exam.title }}</span>
          </div>
        </template>
        <div>
          <p>分数: {{ score.score }}</p>
          <p>提交时间: {{ formatDateTime(score.submitted_at) }}</p>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import api from '../api';
  import { ElMessage } from 'element-plus';
  
  const route = useRoute();
  const score = ref({});
  
  const formatDateTime = (datetime) => {
    return new Date(datetime).toLocaleString('zh-CN');
  };
  
  onMounted(async () => {
    try {
      const response = await api.scores.getScoreDetail(route.params.id);
      score.value = response.data;
    } catch (error) {
      ElMessage.error('加载成绩详情失败');
    }
  });
  </script>
  
  <style scoped>
  .score-detail {
    padding: 20px;
  }
  .card-header {
    font-size: 18px;
    font-weight: bold;
  }
  </style>